<!-- 患者列表页 -->
<template>
  <div>
    <!-- tab选项 -->
    <el-tabs v-model="tab" @tab-click="handleClick">
      <el-tab-pane label="患者列表" name="1"></el-tab-pane>
      <el-tab-pane label="已筛查列表" name="2"></el-tab-pane>
      <el-tab-pane label="待会诊列表" name="3"></el-tab-pane>
      <el-tab-pane label="已会诊列表" name="4"></el-tab-pane>
      <el-tab-pane label="肠内患者列表" name="5"></el-tab-pane>
      <el-tab-pane label="肠外患者列表" name="6"></el-tab-pane>
      <el-tab-pane label="自动筛选列表" name="7"></el-tab-pane>
      
      <!--电子病例, 有数据时显示-->
      <el-tab-pane label="电子病例" name="8"></el-tab-pane>
    </el-tabs>
    
    <!-- 过滤表单 -->
    <el-form :inline="true" :model="fitterFm" class="demo-form-inline" label-width="80px" style="margin-top: 20px;">
      <el-row :gutter="20">

        <el-col :span="8">
          <el-form-item class="date" label="入院日期:">
            <el-col :span="11" style="padding:0px;">
              <el-date-picker type="date" placeholder="选择日期" v-model="fitterFm.date1" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11" style="padding:0px;">
              <el-date-picker type="date" placeholder="选择日期" v-model="fitterFm.date2" style="width: 100%;"></el-date-picker >
            </el-col>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="住院号:">
            <el-input v-model="fitterFm.user" placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="姓名:">
            <el-input v-model="fitterFm.user" placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="病区:">
            <el-input v-model="fitterFm.user" placeholder=""></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="病人所属:" v-if="tab == 2 || tab == 3 || tab == 4">
            <el-input v-model="fitterFm.user" placeholder=""></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8" v-if="tab == 5 || tab == 6">
          <el-form-item label="住院情况:">
            <el-input v-model="fitterFm.user" placeholder=""></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8" v-if="tab == 4">
          <el-form-item label="筛查结果:" >
            <el-input v-model="fitterFm.user" placeholder=""></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8" v-if="tab == 4 || tab == 5 || tab == 6">
          <el-form-item label="临床诊断:">
            <el-input v-model="fitterFm.user" placeholder=""></el-input>
          </el-form-item>
        </el-col>
        
        <el-col :span="8" v-if="tab == 2">
          <el-form-item label="饮食医嘱:">
            <el-input v-model="fitterFm.user" placeholder=""></el-input>
          </el-form-item>
        </el-col>  
      </el-row>
      <div class="btns">
        <el-button type="primary">查询</el-button>
        <el-button type="primary">重置</el-button>
      </div>
    </el-form>

    <!-- 列表显示 -->
    <el-table :data="tableData" :border="broder" style="width: 100%;margin-top: 30px;">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="id" label="序号" width="40px"></el-table-column>
      <el-table-column prop="date" label="入院日期" width="120px"></el-table-column>
      <el-table-column prop="id" label="床号" width="80px"></el-table-column>
      <el-table-column prop="name" label="姓名" width="120px"></el-table-column>
      <el-table-column prop="address" label="住院号"></el-table-column>
      <el-table-column prop="address" label="科室"></el-table-column>
      <el-table-column prop="address" label="病区"></el-table-column>
      <el-table-column prop="address" label="年龄"></el-table-column>
      <el-table-column prop="address" label="性别"></el-table-column>
      <el-table-column prop="address" label="申请医生" v-if="tab == 3"></el-table-column>
      <el-table-column prop="address" label="申请时间" v-if="tab == 3"></el-table-column>
      <el-table-column prop="address" label="临床诊断" v-if="tab == 4"></el-table-column>
      <el-table-column prop="address" label="筛查日期" v-if="tab == 4"></el-table-column>
      <el-table-column prop="address" label="筛查结果" v-if="tab == 4"></el-table-column>
      <el-table-column prop="address" label="会诊时间" v-if="tab == 4"></el-table-column>
      <el-table-column prop="address" label="会诊目的" v-if="tab == 3 || tab == 4"></el-table-column>
      <el-table-column prop="address" label="肠内医嘱" v-if="tab == 5"></el-table-column>
      <el-table-column prop="address" label="肠外医嘱" v-if="tab == 6"></el-table-column>
      <el-table-column prop="address" label="临床诊断" v-if="tab == 5 || tab == 6"></el-table-column>
      <el-table-column prop="address" label="操作" v-if="tab == 5"></el-table-column>
      <el-table-column prop="address" label="筛查结果" v-if="tab == 2 || tab == 7"></el-table-column>
   </el-table>
    
    <div class="page">
      <div class="block" style="float: right;margin-right:30px;">
        <span class="demonstration">&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="100"
          layout="prev, pager, next, jumper"
          :total="1000">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  export default {
    created () {
      console.log('ok')
      var time = new Date()
      console.log(time);
      // var timeStr = moment(time).format("YYYY:MM:DD hh:mm:ss")
      // console.log(timeStr)
      var params = {
        PageIndex: '1',
        PageSize: '10'
      }
      this.$axios.get('/api/Patient/患人列表', {params: params})
        .then((res) => {
          console.log(res.data)
        }).catch((err) => {})
    },
    data() {
      return {
        tab: '1',
        broder: true,
        currentPage: 1,
        fitterFm: {

        },
        tableData: [{
          id:'12',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市'
        }, {
          id:'12',
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市'
        }, {
          id:'12',
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市'
        }, {
          id:'12',
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市'
        }]
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange (val) {
        this.currentPage = val
        console.log(`当前页: ${this.currentPage}`);
      }
    }
  };
</script>
<style lang="less" scope>
  .btns {
    float: right;
    height: 50px;
    margin-right: 180px;
  }
  .date .el-form-item__content {
    width: 300px;
  }
  .el-form-item {
    width: 100%;
  }
  .el-table th , .el-table th .cell {
    background: #34c374;
    color: #fff;
  }
  .el-table th .cell, .el-table td .cell {
    text-align: center;
    padding:0px;
  }
</style>
